<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:easy="http://easy.widgets.com">

 
<a4j:keepAlive beanName="telefoneManagedBean" />

            <rich:simpleTogglePanel switchType="client" label="#{rotulo['lista_telefones']}"
                    id="listaTelefone" opened="false">

              <h:panelGrid columns="8">
                    <h:outputText value="#{rotulo['ddd']}"/>
                    <h:inputText value="#{telefoneManagedBean.telefoneInformado.ddd}" style=" width : 30px;" onkeyup="javascript:OnlyNumber(this)" maxlength="2" />

                    <h:outputText value="#{rotulo['numero']}"/>
                    <h:inputText value="#{telefoneManagedBean.telefoneInformado.numero}" style=" width : 100px;"
                        onkeyup="javascript:mascara(event,'9999-9999')" maxlength="9"/>

                    <h:outputText value="#{rotulo['ramal']}"/>
                    <h:inputText value="#{telefoneManagedBean.telefoneInformado.ramal}" style=" width : 100px;" onkeyup="javascript:OnlyNumber(this)" maxlength="4"/>

                    <h:selectOneMenu value="#{telefoneManagedBean.telefoneInformado.tipoTelefone}">
                        <f:selectItems value="#{telefoneManagedBean.tiposDeTelefone.opcoes}" />
                    </h:selectOneMenu>

                      <a4j:commandButton value="#{rotulo['adicionar']}" action="#{telefoneManagedBean.adicionar}"
                               rendered="#{telefoneManagedBean.renderedBotaoAdicionar}" reRender="listaTelefone" />
              </h:panelGrid>

              
          
            
                <rich:dataTable value="#{telefoneManagedBean.listaTelefone}" rows="10" var="telefone" rendered="#{telefoneManagedBean.renderedListaTelefoneCliente}"
                     onRowMouseOver="this.style.backgroundColor='#F1F1F1'" id="tableListaTelefoneCliente"
                     onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                <f:facet name="header">
                        <rich:columnGroup>
                            <rich:column>
                                #{rotulo['categoria']}
                            </rich:column>
                            <rich:column>
                                #{rotulo['ddd']}
                            </rich:column>
                            <rich:column>
                                #{rotulo['numero']}
                            </rich:column>
                            <rich:column>
                                #{rotulo['ramal']}
                            </rich:column>
                            <rich:column>
                                #{rotulo['editar']}
                            </rich:column>
                            <rich:column>
                                #{rotulo['excluir']}
                            </rich:column>
                        </rich:columnGroup>
                </f:facet>
        <rich:column>
            <h:outputText value="#{telefone.tipoTelefone}"/>
        </rich:column>
         <rich:column>
            <h:outputText value="#{telefone.ddd}"/>
        </rich:column>
         <rich:column>
            <h:outputText value="#{telefone.numero}"/>
        </rich:column>
         <rich:column>
            <h:outputText value="#{telefone.ramal}"/>
        </rich:column>
         
         <rich:column>
    <div align="center">
        <a4j:commandLink action="#{telefoneManagedBean.editar}" value="Editar" reRender="listaTelefone">
            <f:setPropertyActionListener value="#{telefone}" target="#{telefoneManagedBean.telefoneInformado}"/>
        </a4j:commandLink>
    </div>
 </rich:column>
 <rich:column>
    <div align="center">
        <a4j:commandLink action="#{telefoneManagedBean.excluir}" value="Excluir" reRender="listaTelefone">
            <f:setPropertyActionListener value="#{telefone}" target="#{telefoneManagedBean.telefoneInformado}"/>
        </a4j:commandLink>
    </div>
 </rich:column>
    </rich:dataTable>
            

        </rich:simpleTogglePanel>

</ui:composition>
